<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 180px;
            height: 400px;
            text-align: center;
            line-height: 400px;
            border: 1px solid #333;
        }
        .disable {
            cursor: not-allowed;
        }
        .active {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="div1">第{{num}}页</div>
        <button @click="prePage" :disabled="num === 1" :class="{disable: num === 1}"><</button>
        <!-- page 是页码数，也就是btn这个按钮对应第几页； num表示当前用户正在看第几页 -->
        <!-- {'active': page === num} 只有page和num相等时，才表示激活，加上active的class -->
        <button
        v-for="page in total"
        :key="page"
        @click="changePage(page)"
        :class="{'active': page === num}"
        >{{page}}</button>
        <button @click="nextPage" :disabled="num === 5":class="{disable: num === 5}">></button>
    </div>
    <script src="../0511/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                // 总数量
                total: 5,
                // 当前页码
                num: 1
            },
            methods: {
                // 直接切换
                changePage(page) {
                    this.num = page;
                },
                // 上一页
                prePage(){
                    // 三元表达式也行
                    if(this.num > 1) {
                        this.num --
                    }
                },
                // 下一页
                nextPage(){
                    // 三元表达式也行
                    if(this.num < this.total) {
                        this.num ++
                    }
                }
            }
        })
    </script>
</body>
</html>